<template>
  <view class="content">
    <navbar :isHome="true" />
    <view style="margin-top: 130rpx">
      <view class="weui-cell" style="background: #fff9eb">
        <view class="weui-cell__hd">
          <image
            src="../../static/resource/images/ic_myapp.png"
            style="
              display: block;
              width: 40rpx;
              height: 40rpx;
              margin-right: 14rpx;
            "
          ></image>
        </view>
        <view class="weui-cell__bd">
          <text style="color: #be9719; font-size: 26rpx"
            >点击右上角"添加到我的小程序"，方便下次找到！</text
          >
        </view>
        <view class="weui-cell__ft">
          <image
            src="../../static/resource/images/modal_closer.png"
            style="
              display: block;
              width: 30rpx;
              height: 30rpx;
              margin-right: 14rpx;
            "
          ></image>
        </view>
      </view>
    </view>
    <!-- 轮播图 -->
    <view class="index-swiper" v-if="swiperList && swiperList.length > 0">
      <swiper autoplay :interval="3000" :duration="500" circular>
        <template v-for="(item, index) in swiperList" :key="index">
          <swiper-item>
            <!--  :data-index="index"添加自定义属性 为后续操作指定某个图片 -->
            <image
              :src="item.pic_image_url"
              mode="scaleToFill"
              show-menu-by-longpress
              :data-index="index"
            ></image>
          </swiper-item>
        </template>
      </swiper>
    </view>
    <!-- 中间两个大的nav -->
    <view v-if="navs2List && navs2List.length > 0" class="nav2-list">
      <template v-for="(item, index) in navs2List" :key="index">
        <!--  :data-index="index"添加自定义属性 为后续操作指定某个图片 -->
        <view class="nav2-item" :data-index="index" @click="nav2Tab">
          <image :src="item.pic_image_url" mode="widthFix"></image>
        </view>
      </template>
    </view>
    <!-- 下面5个金刚区 -->
    <view class="nav5-list" v-if="nav5List && nav5List.length > 0">
      <template v-for="(item, index) in nav5List" :key="index">
        <view class="nav5-item" @click="nav5Tab" :data-index="index">
          <view class="nav5-pic"
            ><image :src="item.pic_image_url" mode="widFix"></image
          ></view>
          <view
            class="nav5-text"
            :style="'color:' + (item.tcolor ? item.tcolor : '')"
            >{{ item.title }}</view
          >
        </view>
      </template>
    </view>
    <!-- 最下面的医院列表 -->
    <view class="weui-cells hosp-list">
      <view
        class="weui-cell hosp-item weui-cell_access"
        v-for="(item, index) in hospitalList"
        :key="index"
        :data-hid="item.id"
        @click="toHospital"
      >
        <view class="weui-cell__hd">
          <image
            class="hosp-avatar"
            mode="aspectFill"
            :src="
              item.avatar
                ? item.avatar_url
                : '../../static/resource/images/avatar.jpg'
            "
          ></image>
        </view>
        <view class="weui-cell__bd">
          <view>
            <text class="hosp-name">{{ item.name }}</text>
          </view>
          <view class="hosp-line">
            <text class="hosp-rank">{{ item.rank }}</text>
            <text class="hosp-label">{{ item.label }}</text>
          </view>
          <view class="hosp-line">
            <text class="hosp-intro">{{ item.intro }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import navbar from '../../compontents/navbar/navbar.vue'
import { onLoad } from '@dcloudio/uni-app'
import { ref, toRaw } from 'vue'
// 获取轮播图数据
const swiperList = ref([])
// 中间两个 nav
const navs2List = ref([])
// 下面5个金刚区
const nav5List = ref([])
// 医院列表
const hospitalList = ref([])
const app = getApp()
onLoad(() => {
  // 页面加载就调用函数
  app.globalData.utils.getUserInfo()
  app.globalData.utils.request({
    url: '/app/init',
    method: 'GET',
    success: ({ data }) => {
      // console.log('获取当前区域得id', data)
      app.globalData.utils.request({
        url: '/Index/index',
        method: 'GET',
        data: {
          aid: data.data.area.id
        },
        success: ({ data }) => {
          // console.log('通过地区id获取当前页面的数据data', data)
          swiperList.value = data.data.slides
          navs2List.value = data.data.nav2s
          nav5List.value = data.data.navs
          hospitalList.value = data.data.hospitals
        }
      })
    }
  })
})
// 点击中间两个nav
const nav2Tab = e => {
  // console.log('点击中间两个nav e', e)
  // toraw() 函数可以将响应数据转换成普通数据
  const nav = toRaw(navs2List.value)[e.currentTarget.dataset.index]
  navTo(nav, 'nav2')
}
// 下面的nav5的函数
const nav5Tab = e => {
  const nav = nav5List.value[e.currentTarget.dataset.index]
  navTo(nav, 'nav5')
}
// 抽取公共函数
const navTo = (nav, type) => {
  if (nav.stype === '1') {
    uni.navigateTo({
      url: nav.stype_link
    })
  }
}
// 跳转到医院详情页面
const toHospital = e => {
  // console.log('跳转到医院详情页面', e)
  const hid = e.currentTarget.dataset.hid
  uni.navigateTo({
    url: '/pages/hospital/index?hid=' + hid
  })
}
</script>

<style lang="scss">
page {
  background: #fff;
}
.index-swiper {
  padding: 20rpx 20rpx 0 20rpx;
  overflow: hidden;
  swiper {
    border-radius: 10rpx;
    height: 320rpx;
    overflow: hidden;
    swiper-item image {
      widows: 100%;
      height: 100%;
    }
  }
}
.nav2-list {
  margin: 10rpx 20rpx 0 20rpx;
  display: flex;
  justify-content: space-between;
  .nav2-item {
    width: 50%;
    padding: 0 5rpx;
    image {
      width: 100%;
    }
  }
}
.nav5-list {
  margin: 10rpx 20rpx 0 20rpx;
  display: flex;
  .nav5-item {
    margin-top: 20rpx;
    width: 20%;
    image {
      display: block;
      width: 110rpx;
      height: 110rpx;
    }
    text {
      font-size: 24rpx;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}
.hosp-list {
  margin: 10rpx 0 0 0;
  background: none;
}
.hosp-list::before {
  display: none;
}
.hosp-list::after {
  display: none;
}

.hosp-item {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04), 0 1px 6px 0 rgba(0, 0, 0, 0.04);
}
.hosp-item::before {
  display: none;
}
.hosp-item::after {
  display: none;
}
.hosp-name {
  font-weight: bold;
  font-size: 34rpx;
}
.hosp-avatar {
  display: block;
  width: 200rpx;
  height: 180rpx;
  border-radius: 10rpx;
  overflow: hidden;
  margin-right: 20rpx;
}
.hosp-line {
  margin-top: 5rpx;
}
.hosp-line text {
  font-size: 26rpx;
}
.hosp-rank {
  font-weight: bold;
  color: #0bb585;
  margin-right: 15rpx;
}
.hosp-label {
  font-weight: bold;
  color: #0ca7ae;
  margin-right: 15rpx;
}
.hosp-intro {
  color: #999999;
}
</style>
